import React, { useEffect, useState } from 'react';
import { Sidebar,ProductCard,Cell, Dialog, Toast} from 'react-vant';
import axios from 'axios';
import './index.css'
export default function Classify() {
    const [active, setActive] = useState(0);
    const [tablist,setTablist]=useState([])
    const [items,setItems]=useState({})
    const [visible, setVisible] = useState(false)
    useEffect(()=>{
        axios.get('/api/tablist').then((resp)=>{
            setTablist(resp.data.tablist)
        })
    },[])
    const tk=(ind)=>{
        setVisible(true)
        setItems(tablist[active].children[ind])
    }
  return (
    <div className='wrap'>
        <Dialog
        visible={visible}
        title={items.title}
        showCancelButton
        onConfirm={() => {
         
          setVisible(false)
        }}
        onCancel={() => setVisible(false)}
      >
       <div className='img'>
       <img
          className='demo-dialog-img'
          src={items.img}
           
        />
       </div>
      </Dialog>

       <div className='left'>
       <Sidebar
            value={active}
            onChange={(v) => {
                setActive(v);
            }}
        >
            {tablist.length>0 && tablist.map((item,ind)=>(<Sidebar.Item title={item.title} key={ind}/>))}
        </Sidebar>
       </div>
       <div className='right'>
        {tablist.length>0 && tablist[active].children.map((item,ind)=>(<div key={ind} onClick={()=>tk(ind)}>
            <ProductCard
                desc={item.word}
                title={item.title}
                thumb={item.img}
            />
        </div>))}
       </div>
    </div>
  )
}
